<template>
    <el-row class="application-mine-create">
        <el-col>
            <!-- <div class="tree-title">
                <span>我的订阅</span>
                <el-button
                    class="m20"
                    type="primary"
                    size="mini"
                    :disabled="!multipleSelection.length"
                    @click="onCancelSubscribe(multipleSelection)"
                    >取消订阅</el-button
                >
            </div> -->
            <el-table
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                :row-key="getRowKeys"
                @selection-change="handleSelectionChange"
                border
            >
                <el-table-column
                    type="selection"
                    reserve-selection
                    width="55"
                ></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="用户名称"
                    prop="userName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="用户所属组"
                    prop="userGroupName"
                    show-overflow-tooltip
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.userGroupName || "-" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="累计订阅接口个数"
                    prop="subscribeNum"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="累计调用接口次数"
                    prop="invokeNum"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text"
                            v-if="
                                $store.state.user.roles &&
                                    $store.state.user.roles.indexOf('admin') !==
                                        -1
                            "
                            @click="viewDetail(scope.row)"
                            size="mini"
                            >查看用户信息</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination>
        </el-col>
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import { getUserSubscriptionStatistics } from "@/api/dataService/serviceMonitor/monitorList";

export default {
    name: "applicationMineSubscribe",
    props: {
        form: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                viewType: 3
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined,
            multipleSelection: []
        };
    },
    computed: {
        mergerRuleForm() {
            // 不做过滤不需要的字段，由后端负责过滤
            return Object.assign({}, this.ruleForm, this.form);
        }
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true) - 240;
    },
    methods: {
        fetchData() {
            let parmas = {
                pageNum: this.mergerRuleForm.pageNum,
                pageSize: this.mergerRuleForm.pageSize
            };
            getUserSubscriptionStatistics(this.mergerRuleForm, parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getRowKeys(row) {
            return row.id;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        viewDetail(row) {
            if (row && row.userId) {
                this.$router.push(`/manager/user/editUser?id=${row.userId}`);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.tree-title {
    height: 30px;
    line-height: 30px;
}
</style>
